<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">我是文字的内容</div>
  <script>
    // const obj = {
    //   name: 'li'
    // }
    // console.log(obj.name)
    // obj.name = 'sheng'   和这个修改一个道理

    //1.获取元素
    const box = document.querySelector('.box')
    //2.修改文字内容  对象.innerText 属性
    //innerText  只识别文本，不能解释标签
    console.log(box.innerText)   //获取文字内容
    // box.innerText = '我是一个盒子'   //修改文字内容
    box.innerText = '<strong>我是一个盒子</strong>' //不解释标签

    //3.innerHTML 能识别文本，能够解释标签
    console.log(box.innerHTML)
    box.innerHTML = '我要更换'
    box.innerHTML = '<strong>我要更换</strong>'
    console.log(box.innerHTML)

  </script>
</body>

</html>